<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>增加不存在的属性(意思data对象中没有声明过的数据节点) 不能更新视图 (vm.$set就是针对这一点的,但vm.$set也不支持对实例的根数据对象添加响应数据。)</title>
</head>
<body>
<div id="app">
  info.xxx: {{info.xxx}}

  data.yyy: {{yyy}}
</div>
<script src="../../../../../node_modules/vue/dist/vue.js"></script>
<script>
  /** 增加不存在的属性(意思data对象中没有声明过的数据节点) 不能更新视图 (vm.$set就是针对这一点的,但vm.$set也不支持对实例的根数据对象添加响应数据。)*/
  const vm = new Vue({
    el: "#app",
    data: {
      info: {}
    }
  });

  // vm.info.xxx = 222; // 页面一片空白 显然直接给vm.info上一个不存在的xxx属性设置值,视图是无法得知需要更新的

  vm.$set(vm.info, "xxx", 123); // 页面info.xxx的值更新为了123

  vm.$set(vm._data, "yyy", 222);
  //[Vue warn]: Property or method "yyy" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
  //[Vue warn]: Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.

  //这里的root $data,指的应该是data里的一级属性,之所以叫root $data,大概是因为在模板里,这个属性没有前缀(比如本例中,yyy不像info.xxx是被.出来的)
</script>
</body>
</html>
